import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
  EditableProTable,
  PageContainer,
  ProCard,
  ProFormField,
} from '@ant-design/pro-components';
import type { CascaderProps, InputRef } from 'antd';
import { Button, Cascader, Form, Input, Select, Space, Tag, Image } from 'antd';
import React, { useRef, useState } from 'react';
import TagList from './components/TagListModel';
import { getLeaderList, submitPeriod } from '@/services/supervisionApi';

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

interface Option {
  value: string | number;
  label: string;
  children?: Option[];
  disableCheckbox?: boolean;
}

const options: Option[] = [
  {
    label: '周一',
    value: 'Monday',
    children: [
      { label: '1-2', value: '1-2' },
      { label: '3-4', value: '3-4' },
      { label: '5-6', value: '5-6' },
      { label: '7-8', value: '7-8' },
      { label: '9-10', value: '9-10' },
    ],
  },
  {
    label: '周二',
    value: 'Tuesday',
    children: [
      { label: '1-2', value: '1-2' },
      { label: '3-4', value: '3-4' },
      { label: '5-6', value: '5-6' },
      { label: '7-8', value: '7-8' },
      { label: '9-10', value: '9-10' },
    ],
  },
  {
    label: '周三',
    value: 'Wednesday',
    children: [
      { label: '1-2', value: '1-2' },
      { label: '3-4', value: '3-4' },
      { label: '5-6', value: '5-6' },
      { label: '7-8', value: '7-8' },
      { label: '9-10', value: '9-10' },
    ],
  },
  {
    label: '周四',
    value: 'Thursday',
    children: [
      { label: '1-2', value: '1-2' },
      { label: '3-4', value: '3-4' },
      { label: '5-6', value: '5-6' },
      { label: '7-8', value: '7-8' },
      { label: '9-10', value: '9-10' },
    ],
  },
  {
    label: '周五',
    value: 'Friday',
    children: [
      { label: '1-2', value: '1-2' },
      { label: '3-4', value: '3-4' },
      { label: '5-6', value: '5-6' },
      { label: '7-8', value: '7-8' },
      { label: '9-10', value: '9-10' },
    ],
  },
  {
    label: '周六',
    value: 'Saturday',
    children: [
      { label: '1-2', value: '1-2' },
      { label: '3-4', value: '3-4' },
      { label: '5-6', value: '5-6' },
      { label: '7-8', value: '7-8' },
      { label: '9-10', value: '9-10' },
    ],
  },
  {
    label: '周日',
    value: 'Sunday',
    children: [
      { label: '1-2', value: '1-2' },
      { label: '3-4', value: '3-4' },
      { label: '5-6', value: '5-6' },
      { label: '7-8', value: '7-8' },
      { label: '9-10', value: '9-10' },
    ],
  },
];


type DataSourceType = {
  id: React.Key;
  userName?: string;
  nickName?: string;
  avator?: string;
  email?: string;
  phone?: string;
  period: string;
};

export default () => {
  const actionRef = useRef<ActionType>();
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [dataSource, setDataSource] = useState<readonly DataSourceType[]>([]);
  const [form] = Form.useForm();

  // 同时显示 两级菜单
  const displayRender = (labels: Array<string>) => labels.join('/');

  const onChange: CascaderProps<Option, 'value', true>['onChange'] = (value) => {
    console.log(value);
    setSelecttimeSlot(value);
  };

  const columns: ProColumns<DataSourceType>[] = [
    {
      title: 'id',
      dataIndex: 'id',
      readonly: true,
      // width: '30%',
    },
    {
      title: '用户名',
      key: 'nickName',
      dataIndex: 'nickName',
      readonly: true,
    },
    {
      title: '账号',
      dataIndex: 'userName',
      key: 'userName',
      hideInSearch: true,
      readonly: true,
    },
    {
      title: '头像',
      dataIndex: 'avator',
      key: 'avator',
      hideInSearch: true,
      readonly: true,
      render: (_, row) => <Image
        width={50}
        height={50}
        src={row.avator}
        fallback=""
      />
    },
    {
      title: "邮箱",
      dataIndex: 'email',
      key: 'email',
      hideInSearch: true,
      readonly: true,
    },
    {
      title: "手机号码",
      dataIndex: 'phone',
      key: 'phone',
      hideInSearch: true,
      readonly: true,
    },
    {
      title: '分配时间段',
      dataIndex: 'period',
      // width: '20%',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
      renderFormItem: (_, record) => {
        const { isEditable } = record;
        console.log(record)
        console.log(record.record?.nickName)
        return isEditable ? <Cascader
          options={options}
          onChange={onChange}
          multiple
          displayRender={displayRender}
          maxTagTextLength={10}
          maxTagCount={4}
          defaultValue={record.record?.period}
          style={{ minWidth: '55%' }}
        /> : <Input />;
      },
      render: (_, row) => {
        if (row.period) {
          const formattedPeriods = row.period.map(period => period.join('/'));
          return formattedPeriods.map((item: any) => (
            <Tag color="success" style={{ fontSize: "13px" }}> {item}</Tag>
          ))
        } else {
          return <Tag color="error" style={{ fontSize: "13px" }}>未分配</Tag>
        }
      }
    },
    {
      title: '操作',
      valueType: 'option',
      width: 250,
      render: (text, record, _, action) => [
        <a
          key="editable"
          onClick={() => {
            action?.startEditable?.(record.id);
          }}
        >
          编辑
        </a>,
      ],
    },
  ];

  const [selecttimeSlot, setSelecttimeSlot] = useState<any[]>([]);
  return (
    <>
      <PageContainer title="组长管理" >
        <EditableProTable
          rowKey="id"
          scroll={{
            x: 960,
          }}
          actionRef={actionRef}
          // headerTitle="可编辑表格"
          maxLength={5}
          // 关闭默认的新建按钮
          recordCreatorProps={false}
          columns={columns}
          request={async () => {
            let result = await getLeaderList()
            console.log("request", result)
            // result.period = 
            return result
          }}
          value={dataSource}
          onChange={setDataSource}
          editable={{
            form,
            editableKeys,
            onSave: async (key, record) => {
              console.log("onSave", key, record)
              await submitPeriod({
                leaderId: Number(record.id),
                period: JSON.stringify(record.period)
              })
            },
            onChange: setEditableRowKeys,
            actionRender: (row, config, dom) => [dom.save, dom.cancel],
          }}
          toolBarRender={() => [
            <Button type="primary">导出</Button>
          ]}
        />
      </PageContainer>
    </>
  );
};